import React from 'react';
import { Drawer, Descriptions } from 'antd';

const BugDetail = ({ visible, onClose, data }) => {
  return (
    <Drawer
      title='Bug详情'
      width={640}
      placement='right'
      closable={true}
      onClose={onClose}
      visible={visible}>
      <Descriptions
        title='Bug详细信息'
        bordered
        column={1}
        size='small'>
        <Descriptions.Item label='Bug简述'>{data.summary}</Descriptions.Item>
        <Descriptions.Item label='Bug详述'>
          {data.description}
        </Descriptions.Item>
        {data.screenshotPath1 && (
          <Descriptions.Item label='Bug截图1'>
            <img
              src={data.screenshot1}
              alt='Bug截图1'
              style={{ maxWidth: '100%', maxHeight: '300px' }}
            />
          </Descriptions.Item>
        )}
        {data.screenshotPath2 && (
          <Descriptions.Item label='Bug截图2'>
            <img
              src={data.screenshot2}
              alt='Bug截图2'
              style={{ maxWidth: '100%', maxHeight: '300px' }}
            />
          </Descriptions.Item>
        )}
      </Descriptions>
    </Drawer>
  );
};

export default BugDetail;
